<!-- 继承公共视图文件 -->
<extend name="./Application/Admin/View/layout.html" />
 <!-- 可变内容区域 -->
 <block name="mid">

	<div class="row">
	    <div class="col-md-6">
	        <div class="panel panel-default">
	            <div class="panel-heading">
	                <h2><i class="fa fa-indent red"></i><strong>添加员工</strong></h2>
	            </div>
				<form action="" method="post" id="signupForm" enctype="multipart/form-data" class="form-horizontal">
				    <div class="panel-body">

		                <div class="form-group">
                            <label class="col-md-3 control-label" for="text-input">头像上传</label>
                            <div class="col-md-9">
                                <div class="layui-upload">
                                    <button type="button" class="layui-btn" id="avatar">上传图片</button>
                                    <div class="layui-upload-list">
                                    <img class="layui-upload-img" width="100" height="100" id="demo1">
                                    <p id="demoText"></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                          <div class="form-group">
		                    <label class="col-md-3 control-label" for="text-input">帐号</label>
		                    <div class="col-md-9">
		                        <input type="text" id="username" name="username" class="form-control" placeholder="请输入账号">
		                        <span class="help-block error"></span>
		                    </div>
		                </div>
		                <div class="form-group">
		                    <label class="col-md-3 control-label" for="password-input">密码</label>
		                    <div class="col-md-9">
		                        <input type="password" id="password" name="password" class="form-control" placeholder="请输入密码">
		                        <span class="help-block error"></span>
		                    </div>
		                </div>
		                <div class="form-group">
		                    <label class="col-md-3 control-label" for="password-input">确认密码</label>
		                    <div class="col-md-9">
		                        <input type="password" id="cpassword" name="cpassword" class="form-control" placeholder="请输入确认密码">
		                    </div>
		                </div>
		                <div class="form-group">
		                    <label class="col-md-3 control-label" for="text-input">真实姓名</label>
		                    <div class="col-md-9">
		                        <input type="text" id="realname" name="realname" class="form-control" placeholder="请输入真实姓名">
		                        <span class="help-block error"></span>
		                    </div>
		                </div>
		                <div class="form-group">
		                    <label class="col-md-3 control-label" for="email-input">邮箱</label>
		                    <div class="col-md-9">
		                        <input type="email" id="email" name="email" class="form-control" placeholder="请输入邮箱">
		                    </div>
		                </div>
		                <div class="form-group">
		                    <label class="col-md-3 control-label" for="text-input">QQ</label>
		                    <div class="col-md-9">
		                        <input type="text" id="qq" name="qq" class="form-control" placeholder="请输入qq">
		                    </div>
		                </div>
		                <div class="form-group">
		                    <label class="col-md-3 control-label" for="text-input">手机</label>
		                    <div class="col-md-9">
		                        <input type="text" id="tel" name="tel" class="form-control" placeholder="请输入电话">
		                    </div>
		                </div>
		                <div class="form-group">
		                    <label class="col-md-3 control-label" for="text-input">地址</label>
		                    <div class="col-md-9">
		                        <input type="text" id="address" name="address" class="form-control" placeholder="请输入地址">
		                    </div>
		                </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="select">所属角色</label>
                            <div class="col-md-9">
                                <select id="select" name="group_access[group_id]" class="form-control" size="1">
                                    <option value="0">请选择角色</option>

                                    <foreach name="group" item="v">
                                    <option value="{$v.id}">{$v.title}</option>
                                    </foreach>

                                </select>
                            </div>
                        </div>
		                <div class="form-group">
		                    <label class="col-md-3 control-label">性别</label>
		                    <div class="col-md-9">
		                        <label class="radio-inline" for="inline-radio1">
		                        	<input type="radio" id="sex" name="sex" value="1"> 男
		                        </label>
		                        <label class="radio-inline" for="inline-radio2">
		                        	<input type="radio" id="sex" name="sex" value="0"> 女
		                        </label>
		                    </div>
		                    <span class="help-block error"></span>
		                </div>
<!--
		                <div class="form-group">
		                    <label class="col-md-3 control-label" for="file-input">头像</label>
		                    <div class="col-md-9">
		                        <input type="file" id="img" name="img">
		                    </div>
		                </div> -->


		                <div class="form-group">
		                    <label class="col-md-3 control-label" for="code">手机验证</label>
		                    <div class="col-md-3">
		                        <input type="text" name="code" class="form-control" placeholder="请输入短信验证码">
		                    </div>
		                    <div class="col-md-3" style="margin-left: -55px;">
		                        <input type="button" id="code"  value="获取验证码" class="form-control">
		                    </div>
		                </div>
						<br>
				</div>
				<div class="panel-footer">
                    <button type="submit" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> 提交</button>
                    <button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> 重置</button>
                </div>
		      </form>
	        </div>
	    </div>

	</div><!--/.row-->

</block>
<block name="js">

    <script type="text/javascript" src="__ADMIN__assets/js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="__ADMIN__assets/js/jquery.validate.min.js"></script>
	<script type="text/javascript">
		$(function(){

		  // 在键盘按下并释放及提交后验证提交表单
		  $("#signupForm").validate({

		  	// debug:true,  //开发的时候组织表单提交

		  	// 验证规则
		    rules: {
              /*'username':'required', //必填验证(单个规则写法)*/

              // 多个验证写法
              'username':{
              	 required:true,
              	 maxlength:10,
                 minlength:4,
              },
              'password':{
              	 required:true,
              	 equalTo:"#cpassword",  //密码输入框的值必须和确认密码输入框的值一样
              },
              'sex':{
              	 required:true,
              }
		    },

		    // 错误信息提示
		    messages: {
		      username: {
		        required: "请输入用户名",
		        maxlength: "用户名长度必需在4~10位数之间",
		        minlength: "用户名长度必需在4~10位数之间",
		      },
		      password: {
		        required: "请输入密码",
		        equalTo: "两次密码不一致",
		      },
		      sex: {
		        required: "请选择性别",
		      },
		    },

		    errorElement:'span',



		  })

		    // 验证码倒计时
	        var s = 5;
	        var time = 0;
	        $('#code').click(function(){
	        	var code = $(this);
            	var tel = $('#tel').val();//获取手机号码
                $.ajax({
                	url:"{:U('Admin/Ajax/send_sms')}",
                	data:{
                		'tel':tel,
                	},
                	type:'post',
                	success:function(suc){

                        if(suc>0){
                        	alert('验证码发送成功');
                        }else{
                        	alert('验证码发送失败');
                        }
                	}
                })
                // 倒计时
	        	time = setInterval(function(){
                    if(s>0){
                    	var txt = s+'后重新获取验证码';
                    	code.val(txt);
                    	code.attr('disabled','disabled');
                        s--;
                    }else{
                    	s = 5;
                    	var txt ='获取验证码';
                    	code.val(txt);
                    	code.attr('disabled',false);
                    	clearInterval(time);
                    }
	        	},1000)
	        })


            //头像上传
              var uploadInst = upload.render({
                elem: '#avatar',
                url: "{:U('admin/ajax/avatar')}",
                before: function(obj){
                  //预读本地文件示例，不支持ie8
                  obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                  });
                },
                done: function(res){
                  //如果上传失败
                  if(res > 0){
                     return layer.msg('上传成功');
                  }else{
                     return layer.msg('上传失败',{icon:5});
                  }
                  //上传成功
                },
                error: function(){
                  //演示失败状态，并实现重传
                  var demoText = $('#demoText');
                  demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                  demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                  });
                }
              });
		})
	</script>
</block>